import React, { Component } from 'react'
import { Breadcrumb, Card, Alert, Cascader, Row, Col, message, Modal, Tabs, Button, Table, Space, Tooltip, Popconfirm, Tag, Form, Input } from 'antd'
import BreadcrumbItem from 'antd/lib/breadcrumb/BreadcrumbItem'
import { getCategories, getAttributesById, addAttrById, deleteAttrById } from '../../../api/goods'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'

export default class GoodParameters extends Component {
  state={
    cateList:[],
    catId:null,
    activeKey:"many",
    attrList:[],
    addManyAttrModalVisiable:false,
    manyColumns:[
      {
        title:"",
        align:"center",
        render:(text,record,index) => index + 1
      },
      {
        title:"参数名称",
        align:"center",
        dataIndex:"attr_name"
      },
      {
        title:"操作",
        align:"center",
        render:(text,record) => {
          return (
            <Space>
              <Tooltip title="编辑此参数">
                <Button type="primary" onClick={this.showEditManyAttrModal} icon={<EditOutlined/>}/>
              </Tooltip>
              <Popconfirm title="确定删除此参数吗？" onConfirm={_ => this.delAttr(this.state.catId,record.attr_id)}>
                <Button type="danger" icon={<DeleteOutlined/>}/>
              </Popconfirm>
            </Space>
          )
        }
      }
    ]
  }
  getCateList = async () =>{
    const res = await getCategories();
    if(res.meta.status !== 200){
      return message.error(res.meta.msg);
    }
    this.setState({
      cateList:res.data
    })
  }
  getAttrs = async () => {
    const res = await getAttributesById(this.state.catId,this.state.activeKey)
    if(res.meta.status !== 200){
      return message.error(res.meta.msg);
    }
    this.setState({
      attrList:res.data
    })
  }
  changeCate = async (value) => {
    await this.setState({
      catId:value[2],
    })
    this.getAttrs()
  }
  changeTab =async (value) => {
    await this.setState({
      activeKey:value
    })
    this.getAttrs()
  }
  showAddManyAttrModal = ()=>{
    this.setState({
      addManyAttrModalVisiable:true,
    })
  }
  handleOKAddManyAttr = ()=>{
    this.refs.addManyAttrFormRef.submit()
  }
  handleCancelAddManyAttr = () => {
    this.setState({
      addManyAttrModalVisiable:false,
    })
  }
  handleFinishAddManyAttr = async (value) =>{
    console.log(value)
    const res = await addAttrById(this.state.catId,value.attr_name,this.state.activeKey);
    if(res.meta.status!==201){
      message.error(res.meta.msg);
    }else{
      message.success(res.meta.msg)
      this.getAttrs()
    }
    this.handleCancelAddManyAttr()
  }
  handleFailedAddManyAttr = () =>{
    message.warning("请填写完表单再提交")
  }
  delAttr = async (id, attrid) => {
    const res = await deleteAttrById(id,attrid);
    if(res.meta.status !== 200){
      return message.error(res.meta.msg)
    }
    message.success(res.meta.msg)
    this.getAttrs()
  }
  componentDidMount(){
    this.getCateList()
  }
  render() {
    return (
      <div>
        <Card>
          <Breadcrumb>
            <BreadcrumbItem>首页</BreadcrumbItem>
            <BreadcrumbItem>商品管理</BreadcrumbItem>
            <BreadcrumbItem>分类参数</BreadcrumbItem>
          </Breadcrumb>
          <Alert message="注意只能为第三级分类设置参数" type="info" style={{marginTop:"10px"}}/>
          <Row style={{marginTop:"10px"}}>
            <Col span={4}>
              <div>请选择商品分类：</div>
            </Col>
            <Col>
              <Cascader options={this.state.cateList} fieldNames={{label:"cat_name",value:"cat_id"}} onChange={this.changeCate} placeholder="请选择商品分类"/>
            </Col>
          </Row>
          <Tabs defaultActiveKey="many" onChange={this.changeTab}>
            <Tabs.TabPane tab="动态参数" key="many">
              <Button type="primary" disabled={!this.state.catId} onClick={this.showAddManyAttrModal}>添加参数</Button>
              <Table
                style={{marginTop:'10px'}}
                dataSource={this.state.attrList}
                rowKey="attr_id"
                columns={this.state.manyColumns}
                expandable={{
                  expandedRowRender: record =>{
                    let arr = record.attr_vals.split(' ')
                    return (
                      <Space>
                        {
                          arr.map(item => <Tag color="blue"  closable>{item}</Tag>)
                        }
                      </Space>
                    )
                  },
                  rowExpandable: record => record.attr_vals.trim().length,
                }}
              >
              </Table>
            </Tabs.TabPane>
            <Tabs.TabPane tab="静态属性" key="only">
              <Button type="primary" disabled={!this.state.catId} onClick={this.showAddManyAttrModal}>添加属性</Button>
              <Table
                style={{marginTop:'10px'}}
                dataSource={this.state.attrList}
                rowKey="attr_id"
                columns={this.state.manyColumns}
                expandable={{
                  expandedRowRender: record =>{
                    let arr = record.attr_vals.split(' ')
                    return (
                      <Space>
                        {
                          arr.map(item => <Tag color="blue"  closable>{item}</Tag>)
                        }
                      </Space>
                    )
                  },
                  rowExpandable: record => record.attr_vals.trim().length,
                }}
              >
              </Table>
            </Tabs.TabPane>
          </Tabs>
        </Card>
        <Modal 
          title="添加参数/属性"
          visible={this.state.addManyAttrModalVisiable}
          onOk={this.handleOKAddManyAttr}
          onCancel={this.handleCancelAddManyAttr}
        >
          <Form ref="addManyAttrFormRef" onFinish={this.handleFinishAddManyAttr} onFinishFailed={this.handleFailedAddManyAttr}>
            <Form.Item label="参数/属性名：" name="attr_name" rules={[{required:true,message:"请填写动态参数名"}]}>
              <Input/>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
